<template>
  <div class="newCourseArrangement">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增排课表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="mb-12">
     <el-col :span="4">
              <el-select v-model="form.majorID" placeholder="请选择专业" class="max-width">
               <el-option
                  v-for="item in majorList"
                  :label="item.majorName"
                  :value="item.majorID">
               </el-option>
              </el-select>
      </el-col>
      <el-col :span="4">
        <div class="">
          <el-input v-model="form.enrollmentTime" placeholder="请输入年级"></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <el-row>
          <el-col :span="11">
            <el-date-picker
              type="year"
              placeholder="开始学年"
              v-model="startYear"
              class="max-width"
              @change="getYear">
            </el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="year"
              placeholder="结束学年"
              v-model="endYear"
              class="max-width">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
       <div class="">
          <el-select v-model="form.term" placeholder="请选择学期" class="max-width">
            <el-option label="01" value="01"></el-option>
            <el-option label="02" value="02"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="overflow-clear">
          <el-button type="primary" class="add-pd-26 float-right" @click="res">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <hr>
    
    <el-dialog title="新增排课表" v-model="dialogFormVisible">
      <el-form :model="addCourseForm">
        <el-form-item label="教师名称" :label-width="formLabelWidth">
          <el-select
            class="full-line"
            v-model="addCourseForm.teacherID"
            filterable
            clearable
            placeholder="请选择教师名称">
            <el-option
              v-for="item in teacherChoose"
              :label="item.teacherName"
              :value="item.teacherId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程名称" :label-width="formLabelWidth">
          <el-select
            class="full-line"
            v-model="addCourseForm.courseID"
            filterable
            clearable
            placeholder="请选择课程名称">
            <el-option
              v-for="item in courseChoose"
              :label="item.courseName"
              :value="item.courseId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称" :label-width="formLabelWidth">
          <el-select
            class="full-line"
            v-model="addCourseForm.classID"
            filterable
            clearable
            placeholder="请选择班级名称">
            <el-option
              v-for="item in classChoose"
              :label="item.className"
              :value="item.classID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课周数" :label-width="formLabelWidth">
          <el-input v-model="addCourseForm.classWeek"></el-input>
        </el-form-item>
        <el-form-item label="周学时数" :label-width="formLabelWidth">
          <el-input v-model="addCourseForm.weeklyHour"></el-input>
        </el-form-item>
        <el-form-item label="是否使用" :label-width="formLabelWidth">
          <el-input v-model="addCourseForm.isUse"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="5" v-model="addCourseForm.remark1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确 定</el-button>
      </div>
    </el-dialog>
  <el-table
      :data="courseInfo"
      style="width: 100%"
      :default-sort="{prop: 'teacherName',order:'ascending'}">
      
      <el-table-column
        prop="courseID"
        label="课程编号"
        min-width="120"
        >
      </el-table-column>
      <el-table-column
        prop="courseNameCN"
        label="所任课程"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="className"
        label="所任班级"
        min-width="130">
      </el-table-column>
      <el-table-column
        prop="weeks"
        label="上课周数"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="weeklyHour"
        label="周学时数"
        min-width="120">
      </el-table-column>
    </el-table>
    <el-row :gutter="20" style="margin: 50px 0 0 0">
      <el-col :span="6" :offset="7">
        <el-button type="info" class="add-pd-26" @click="add">新增排课</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="info" class="add-pd-26">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'newCourseArrangement',
    data() {
      return {
        form: {
          majorID: '',
          enrollmentTime:'',
          academicYear: '',
          term: ''
        },
        addCourseForm: {
          teacherID: '',
          courseID: '',
          classID: '',
          classWeek: '',
          weeklyHour: '',
          isUse: '',
          remark1: ''
        },
        courseInfo: [],
        majorList:[],
        academicYear: '',
        startYear: '',
        endYear: '',
        dialogFormVisible: false,
        formLabelWidth: '120px',
        teacherChoose: [],
        courseChoose: [],
        classChoose: [],
      }
    },
    created () {
		this.getMajor();
    },
    methods: {
      getMajor(){
        		this.$http.get(`http://localhost:8080/TeachingMIS/common/getMajorList`)
		          .then((res) => {
		            console.log(res)
		            this.majorList = res.body
		          }, (err) => {
		            // 响应错误回调
		            //console.log(err)
		          })
      		},
      res() {
        this.$http.post(`http://localhost:8080/TeachingMIS/courseArrange/getCourseList`, this.form).then((res) => {
		          // 响应成功回调
		          console.log(res.body)
		          this.courseInfo = res.body.arrangeList;
		        }, (err) => {
		          // 响应错误回调
		          console.log("服务器异常！");
		        })
      },
      add() {
      	var courseArrangeID;
        this.$http.post(`http://localhost:8080/TeachingMIS/courseArrange/addArrange`, this.form).then((res) => {
		          // 响应成功回调
		          console.log(res.body);
		          courseArrangeID = res.body.courseArrangeID;
		          alert(res.body.courseArrangeID);
		          this.$router.push({path: 'UpdateArrange', query: {courseArrangeID: res.body.courseArrangeID}})
		        }, (err) => {
		          // 响应错误回调
		          console.log("服务器异常！");
		        })
		
      },
      getYear(val){
        this.endYear = (parseInt(val) + 1).toString()
        this.form.academicYear = val + '-' + this.endYear
      },
      searchCourse: function () {

      },
      onSubmit: function () {

      },
      NewCourseArr(){
        this.dialogFormVisible = true
      },
      submitDialogForm(){
        this.dialogFormVisible = false
      }
     
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .add-pd-26 {
    padding-left: 1.6em;
    padding-right: 1.6em;
  }
</style>
